<template>
    <view class="content">
        
        
        <!-- 这里class 后套了一层 名字有点问题 -->
    <view class="dingji-list" style="width: 750upx;">
    
        <view class="list" v-for="item in list" @click="to_article(item.article_id)">
            <view class="list-top">
                <view class="list-top-img">
                    <image :src="item.avatar?item.avatar:'https://mes.renkangshangcheng.cn/appimage/bz.png'"></image>
                </view>
                <view class="list-top-info">
                    <view class="list-top-info-name">{{item.nick_name}}</view>
                    <view class="list-top-info-date">8月24日 17:34</view>
                </view>
            </view>
            <view>{{item.content}}</view>
            
            <view class="list-bottom">
                <!-- 内容-文章-置顶 -->
                <view class="article">
                    
                    <view class="article-info">
                        <view class="article-info-left">
                           {{item.title}}
                        </view>
                        <view class="article-info-right">
                            <image v-if="item.cover_images[0]" :src="item.cover_images[0]?item.cover_images[0]:'https://mes.renkangshangcheng.cn/appimage/logo.png'" mode=""></image>
                        </view>
                    </view>
                    
                    
                    <view class="user-cz">
                        <view class="user-cz-c">
                            <image class="user-cz-operation" src="https://mes.renkangshangcheng.cn/appimage/xx.png" mode=""></image>
                            {{item.collect_num}}
                        </view>
                        <view class="user-cz-c">
                            <image class="user-cz-operation" src="https://mes.renkangshangcheng.cn/appimage/pl.png" mode=""></image>
                            {{item.comment_num}}
                        </view>
                        <view class="user-cz-c">
                            <image class="user-cz-operation" src="https://mes.renkangshangcheng.cn/appimage/dianzan.png" mode=""></image>
                            {{item.zan_num}}
                        </view>
                    </view>
                </view>
                
            </view>
        </view>
        <view style="width: 750upx;height: 20upx;background-color: #F8F8F8;"></view>
        

    </view>
        
       
        
        
        <!-- <view class="list" v-for="(num,index) in data" :key="index"></view> -->
        <!-- <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view> -->
        
        
    </view>
</template>

<script>
 export default {
    	components: {},
    	data() {
    		return {
    			chooseType:'gz',                
                data: [],
                loadMoreText: "加载中...",
                showLoadMore: false,
                max: 0,
				formData:{
					page:1,
					limit:10
				},
				list:[]
    		};
    	},
        onLoad() {
        	this.initData();
			this.get_list();	
        },
		onShow() {
			
		
		},
        onUnload() {
        	this.max = 0,
        	this.data = [],
        	this.loadMoreText = "加载更多",
        	this.showLoadMore = false;
        },
        // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
        onReachBottom() {
        	// if (this.max > 40) {
        	// 	this.loadMoreText = "没有更多数据了!"
        	// 	return;
        	// }
        	// this.showLoadMore = true;
        	// setTimeout(() => {
        	// 	this.setListData();
        	// }, 300);
			this.formData.page=this.formData.page+1
			this.get_list()
        },
        // 监听用户下拉动作，一般用于下拉刷新
        onPullDownRefresh() {
			this.formData.page=1;
			this.list=[]
			this.get_list()
        	this.initData();
        },
    	methods: {
            qiehuan(type) {
                this.chooseType = type;
            },
            initData(){
            	setTimeout(() => {
            		this.max = 0;
            		this.data = [];
            		let data = [];
            		this.max += 20;
            		for (var i = this.max - 19; i < this.max + 1; i++) {
            			data.push(i)
            		}
            		this.data = this.data.concat(data);
            		uni.stopPullDownRefresh(); // 结束下拉刷新
            	}, 300);
            },
            setListData() {
            	let data = [];
            	this.max += 10;
            	for (var i = this.max - 9; i < this.max + 1; i++) {
            		data.push(i)
            	}
            	this.data = this.data.concat(data);
            },
			get_list()
			{
				var _this=this;
				var data=_this.formData;
				var list=this.list
				_this.$api.doRequest("post","api/my_comment",data).then(res=>{
					console.log(res.data.data.list)
					list=list.concat(res.data.data.list)
					_this.list=list
				})
			},
			to_article(id){
				uni.navigateTo({
					url:"/pages/article/index?id="+id
				})
			}
    	}
    };
</script>

<style>
.content {
    width: 750upx;
    height: 100vh;
    /* background-color: #F8F8F8; */
}
.list {
    width: 710upx;
    /* height: 430upx; */
    margin:0 auto;
    background-color: #fff;
    
    
}
.list-top {
    height: 130upx;
    width: 710upx;
    display: flex;
}
.list-top-img {
    flex:1;
}
.list-top-img image {
    width: 88upx;
    height: 88upx;
    margin-top: 21upx;
}
.list-top-info {
    flex:6;
}
.list-top-info-name {
    color: #000000;
    font-size: 28upx;
    margin-top: 30upx;
}
.list-top-info-date {
    color: #666666;
    font-size: 24upx;
}

  .article {
    width:710upx;
    margin:0upx auto;
    margin-top:15upx;
  }
  .article-info {
      width:710upx; 
      background-color: #f8f8f8;
      display: flex;
  }
  .article-info-left {
      flex:4;
      color:#000;
      font-size: 32upx;
      padding:24upx;
  }
  .article-info-right {
    flex:2;
    padding:24upx 24upx 0upx 0upx;
  }
  .article-info-right image {
      width: 192upx;
      height: 144upx;
  }
  

  .article-imgs {
      width:710upx;
      margin:0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      text-decoration: none;
  }
  .articles {
    height: 800upx;
    width: 100%;
    background-color: #39B54A;
  }
  .article-img {
      width:32%;
      height:130upx;
      border-radius: 15upx;;
      background-color: red;
  }
  .article-zd {
      display: inline-block;
      border:1px solid #FD603A;
      margin:15upx 0upx;
      color:#FD603A;
      padding:5upx 5upx;
      border-radius: 10upx;
      font-size:14upx;
  }
  .user-cz {
      display: flex;
      margin-top: 10upx;
  }
  .user-cz-c {
      flex:1;
      text-align:center;
	  color: #999999;
	  font-size: 24upx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
  }
  .user-cz-operation {
      width: 25upx;
      height: 25upx;
      margin-right: 10upx;
  }
  .videos {
    width:710upx;
    margin:0upx auto;
    margin-top:15upx;
  }
  .videos-imgs {
      width:710upx;
      height:450upx;
  }

</style>





